<template>
  <div class="ranking-page">
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>排行榜</h2>
          <p>选手排名和积分统计</p>
        </div>
        <div class="action-section">
          <el-button type="primary" @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card class="ranking-card">
      <template #header>
        <div class="card-header">
          <span>积分排行榜</span>
          <el-radio-group v-model="rankingType" @change="handleRankingTypeChange">
            <el-radio-button label="total">总积分</el-radio-button>
            <el-radio-button label="monthly">本月积分</el-radio-button>
            <el-radio-button label="weekly">本周积分</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      
      <vxe-table
        :data="rankingData"
        border
        stripe
        height="500"
        :seq-config="{ startIndex: 1 }"
      >
        <vxe-column type="seq" width="80" title="排名"></vxe-column>
        <vxe-column field="avatar" title="头像" width="80" align="center">
          <template #default="{ row }">
            <el-avatar :size="40" :src="row.avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
          </template>
        </vxe-column>
        <vxe-column field="name" title="选手姓名" width="120"></vxe-column>
        <vxe-column field="level" title="等级" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getLevelType(row.level)">
              {{ getLevelText(row.level) }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column field="total_matches" title="总比赛数" width="100" align="center"></vxe-column>
        <vxe-column field="wins" title="胜利场次" width="100" align="center"></vxe-column>
        <vxe-column field="losses" title="失败场次" width="100" align="center"></vxe-column>
        <vxe-column field="win_rate" title="胜率" width="100" align="center">
          <template #default="{ row }">
            <span :style="{ color: getWinRateColor(row.win_rate) }">
              {{ row.win_rate }}%
            </span>
          </template>
        </vxe-column>
        <vxe-column field="points" title="积分" width="100" align="center">
          <template #default="{ row }">
            <span class="points-text">{{ row.points }}</span>
          </template>
        </vxe-column>
        <vxe-column field="trend" title="趋势" width="100" align="center">
          <template #default="{ row }">
            <el-icon 
              :color="row.trend === 'up' ? '#67c23a' : row.trend === 'down' ? '#f56c6c' : '#909399'"
            >
              <ArrowUp v-if="row.trend === 'up'" />
              <ArrowDown v-else-if="row.trend === 'down'" />
              <Minus v-else />
            </el-icon>
          </template>
        </vxe-column>
      </vxe-table>
    </el-card>

    <el-row :gutter="20" class="stats-cards">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#409eff">
                <Trophy />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>总选手数</h3>
              <p class="stat-number">{{ totalPlayers }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#67c23a">
                <TrendCharts />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>活跃选手</h3>
              <p class="stat-number">{{ activePlayers }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#e6a23c">
                <Star />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>平均积分</h3>
              <p class="stat-number">{{ averagePoints }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 排行榜类型
const rankingType = ref('total')

// 排行榜数据
const rankingData = ref([
  {
    id: 1,
    name: '张三',
    level: 'professional',
    total_matches: 24,
    wins: 20,
    losses: 4,
    win_rate: 83,
    points: 1850,
    trend: 'up',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    id: 2,
    name: '李四',
    level: 'advanced',
    total_matches: 22,
    wins: 18,
    losses: 4,
    win_rate: 82,
    points: 1720,
    trend: 'up',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    id: 3,
    name: '王五',
    level: 'advanced',
    total_matches: 20,
    wins: 15,
    losses: 5,
    win_rate: 75,
    points: 1650,
    trend: 'stable',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    id: 4,
    name: '赵六',
    level: 'intermediate',
    total_matches: 18,
    wins: 12,
    losses: 6,
    win_rate: 67,
    points: 1420,
    trend: 'down',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    id: 5,
    name: '孙七',
    level: 'intermediate',
    total_matches: 16,
    wins: 10,
    losses: 6,
    win_rate: 63,
    points: 1280,
    trend: 'up',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  }
])

// 统计数据
const totalPlayers = computed(() => rankingData.value.length)
const activePlayers = computed(() => rankingData.value.filter(player => player.total_matches > 0).length)
const averagePoints = computed(() => {
  const total = rankingData.value.reduce((sum, player) => sum + player.points, 0)
  return Math.round(total / rankingData.value.length)
})

// 方法
const handleRefresh = () => {
  ElMessage.success('数据已刷新')
}

const handleRankingTypeChange = (value: string) => {
  ElMessage.info(`切换到${value === 'total' ? '总积分' : value === 'monthly' ? '本月积分' : '本周积分'}排行榜`)
}

const getLevelType = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: 'info',
    intermediate: 'warning',
    advanced: 'success',
    professional: 'danger'
  }
  return levelMap[level] || 'info'
}

const getLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: '初级',
    intermediate: '中级',
    advanced: '高级',
    professional: '专业'
  }
  return levelMap[level] || '未知'
}

const getWinRateColor = (rate: number) => {
  if (rate >= 80) return '#67c23a'
  if (rate >= 60) return '#e6a23c'
  return '#f56c6c'
}
</script>

<style scoped>
.ranking-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.ranking-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  margin-right: 20px;
}

.stat-info h3 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
}

.stat-number {
  margin: 0;
  color: #303133;
  font-size: 28px;
  font-weight: bold;
}

.points-text {
  font-weight: bold;
  color: #409eff;
}
</style>
